import React, { Component } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

class TabBar extends Component {
  constructor(props) {
    super(props)
    this.state = { tabList: tabbar } 
  }
  render() {
    const { tabList } = this.state
    const { cartNum } = this.props
    return (
      <div className='tabbarBox'>
        <div className='tabbar'>
          {tabList.map((item,index) => <div className='item' key={index}>
            {(item.text === '购物车' && cartNum > 0) && <span>{cartNum}</span>}
            <NavLink to={item.path} activeClassName='tabbar_active'>{item.text}</NavLink>
          </div>)}
        </div>
      </div>
    )
  }
}

function mapStateFromProps(state) {
  return state.cartStore
}

export default withRouter(connect(mapStateFromProps)(TabBar))

const tabbar = [
  {
    text: '首页',
    path: '/home'
  },
  {
    text: '新闻',
    path: '/news'
  },
  {
    text: '购物车',
    path: '/cart'
  },
  {
    text: '我的',
    path: '/mine'
  }
]